
<!-- 改变全屏字体大小
emit样式大小传值
-->
<template>
   <el-dropdown trigger="click" @command="sizechange">
      <span><a><i class="iconfont icon-zitidaxiao"></i></a></span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :icon="CaretRight" command="large" :disabled="size=='large'">超大</el-dropdown-item>
        <el-dropdown-item :icon="CaretRight"  command="default" :disabled="size=='default'">默认</el-dropdown-item>
        <el-dropdown-item :icon="CaretRight"  command="small" :disabled="size=='small'">极小</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup lang="ts">
import { CaretRight } from '@element-plus/icons-vue'
import { ElMessage} from 'element-plus'
import {ref} from 'vue'
const size=ref('default')
size.value=localStorage.getItem('size') as string//获取本地储存防止刷新回到默认选项
const emit=defineEmits<{//子传父，自定义事件定义的size大小传值
   (e:'changeSize',size:string):void
}>()
const sizechange=(e:string)=>{
   size.value=e
   localStorage.setItem('size',e)//存在本地存储
   emit('changeSize',e)//传给主页面
   ElMessage.success('设置成功！')
}
</script>
<style lang="less" scoped>
.el-dropdown{
  margin-right: 10px;
  i{
    font-size: 20px;
  }
}
</style>